<template>
  <div>
    <StoreChoice
      ref="StoreChoice"
      :isReset="storeReset"
      :current="params.store"
      :multipleChoice="true"
      @listenToStoreSelect="getSelectStoreValue"
      :statusFilter="false"
      :hasTotal="false"
    />
    <mt-popup v-model="popupVisible" position="right" :modal="false" class="filtate">
      <awesome-picker
        ref="casher"
        colorTitle="#38ADFF"
        colorConfirm="#38ADFF"
        :textTitle="casher.textTitle"
        :data="casher.data"
        :anchor="casher.anchor"
        @confirm="handleCasherConfirm"
        @cancel="casherVisible=false"
      ></awesome-picker>
      <mt-datetime-picker class="date-picker"
        ref="startPicker"
        type="datetime"
        v-model="startDate"
        year-format="{value}年"
        month-format="{value}月"
        date-format="{value}日"
        confirmText="下一步"
        :startDate="moment('2020/09/01').toDate()"
        :endDate="moment(endDate).toDate()"
        @confirm="$refs.endPicker.open()"
      ></mt-datetime-picker>
      <mt-datetime-picker class="date-picker"
        ref="endPicker"
        type="datetime"
        v-model="endDate"
        year-format="{value}年"
        month-format="{value}月"
        date-format="{value}日"
        :startDate="moment(startDate).toDate()"
        @confirm="dateChoice"
      ></mt-datetime-picker>
      <customHeader middleTitle="筛选" @leftCallBack="popupHide" :jsBridgeBack="false"/>
      <div class="section">
        <div class="title">门店范围</div>
        <div class="picker-val" @click="handleClickSelectStore">
          <span>{{formateStore}}</span>
          <i v-if="roleInfo.manyShopFlag" class="zhk-list_rarrow"></i>
        </div>
      </div>
      <div class="section">
        <div class="title">时间范围</div>
        <div class="picker-val" @click="$refs.startPicker.open()">
          <span>{{moment(params.startDate).format('YYYY-MM-DD HH:mm')}} ～ {{moment(params.endDate).format('YYYY-MM-DD HH:mm')}}</span>
          <i class="zhk-activity_rl"></i>
        </div>
      </div>
      <div class="section">
        <div class="title">收银员</div>
        <div class="picker-val" @click="showCasher">
          <span>{{casher.selected.text}}</span>
          <i class="zhk-list_rarrow"></i>
        </div>
      </div>
      <div class="section">
        <div class="title">活动类型</div>
        <ul class="check-list">
          <li class="item" :class="{checked:item.checked}" @click="handleCheck(item, coupon)" v-for="(item,index) in coupon" :key="index">
            {{item.label}}<i class="zhk-detail_select"></i>
          </li>
        </ul>
      </div>
      <div class="btn-wrap margin-safe-area-bottom">
        <div @click="reset">重置</div>
        <div @click="sure">确定</div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);
import moment from "moment";
import {DatetimePicker, Popup, Toast} from "mint-ui";
import StoreChoice from "@/components/StoreChoice/StoreChoice";
import customHeader from "@/components/header/header";

export default {
  components: {
    customHeader,
    StoreChoice
  },
  props: {
    filtrateParams: {
      type: Object,
      default: function () {
        return {
          store: []
        }
      }
    },
    roleInfo: {
      type: Object
    }
  },
  data() {
    return {
      moment: moment,
      popupVisible: false,
      storeReset: true,
      isAllStore: true,
      coupon: [
        {label: "满减券", value: 1, checked: true},
        {label: "消费赠券", value: 2, checked: true},
        {label: "拉新券", value: 3, checked: true},
        {label: "引流券", value: 4, checked: true}
      ],
      casher: {
        anchor: [],
        textTitle: "收银员",
        selected: { text: "不限" },
        data: [{value: "不限", id: ""}]
      },
      startDate: new Date(),
      endDate: new Date(),
      params: {
        startDate: '',
        endDate: '',
        store: [],
        coupon: [],
        casher: '',
        isAllStore: true
      }
    };
  },
  computed: {
    formateStore() {
      let txt = "", store = this.params.store;
      if(this.roleInfo.manyShopFlag!==undefined && !this.roleInfo.manyShopFlag) {
        store = [{selectName: this.roleInfo.shopName, selectKey: this.roleInfo.yzShopId}];
        txt = this.roleInfo.shopName;
      }else if(!this.isAllStore) {
        txt = store.length==1 ? store[0].selectName : `已选择${store.length}家门店`;
      }else {
        txt = "全部门店";
      }
      return txt;
    }
  },
  methods: {
    showCasher() {
      this.$refs.casher.show();
    },
    handleCasherConfirm(v) {
      this.casher.anchor = v;
      this.casher.selected.value = this.casher.data[v[0].index].id;
      this.casher.selected.text = v[0].value || '不限';
      this.params.casher = this.casher.selected.value;
      this.casherVisible = false;
    },
    dateChoice() {
      this.params.startDate = +this.startDate;
      this.params.endDate = +this.endDate;
    },
    getSelectStoreValue(value, storeName) {
      this.isAllStore = (storeName==="全部门店");
      this.params.store = value;
      if(value.length) this.params.casher = '';
      this.getCashierList(value);
    },
    handleClickSelectStore() {
      if(this.roleInfo.manyShopFlag!==undefined && !this.roleInfo.manyShopFlag){
        return;
      }
      this.$refs.StoreChoice.popupShow();
    },
    handleCheck(item, list) {
      let coupon = [];
      list.forEach((currentValue, index, arr)=> {
        if(item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        }
        currentValue.checked && coupon.push(item);
      });
    },
    popupShow() {
      this.params = JSON.parse(JSON.stringify(this.filtrateParams));
      this.casher.selected = Object.assign({}, this.filtrateParams.selected);
      this.reset();
      this.popupVisible = true;
    },
    popupHide() {
      if(this.$refs.StoreChoice.popupVisible) {
        this.$refs.StoreChoice.popupHide();
      }else {
        this.popupVisible = false;
      }
    },
    reset(flag) {
      if(!this.default) this.default = JSON.parse(JSON.stringify(this.params));
      if(flag) this.params = JSON.parse(JSON.stringify(this.default));
      if(!this.params.store.length) this.storeReset = new Date();
      this.casher.selected = Object.assign({}, this.filtrateParams.selected);;
      this.params.casher = this.filtrateParams.selected.value;
      this.casher.anchor = [];
      this.startDate = moment(this.params.startDate).toDate();
      this.endDate = moment(this.params.endDate).toDate();
      this.coupon.forEach(item=> {
        let checked;
        if(!this.params.coupon.length) {
          checked = true;
        }else {
          let arr = this.params.coupon.filter(ele=>(ele.value==item.value))
          checked = !!arr.length;
        }
        item.checked = checked;
      });
    },
    sure() {
      this.params.coupon = this.coupon.filter(item=>item.checked==true);
      this.popupVisible = false;
      this.params.selected = Object.assign({}, this.casher.selected);
      this.$emit('cosume', this.params);
    },
    getCashierList(store) {
      let _store = [];
      store.forEach(item=> {
        _store.push(item.selectKey||item)
      })
      this.casher.data = [{value: "不限", id: ""}];
      if(!this.params.casher) {
        this.casher.selected = {text: '不限'};
        this.casher.anchor = [];
      }
      this.ajax({
        url: 'newapp/employee/queryCashier.do',
        type: "post",
        data: {
          shopIdList: _store
        },
        controlLoading: false
      }).then(res => {
        if(res && res.success) {
          let data = res.resultObject, _data = [];
          if (data && data.length > 0) {
            _data = CommonUtil.formatPickerData(data, "name", "accountId");
            _data.unshift({value: "不限", id: ""});
          }
          this.casher.data = _data;
        }else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/public";
.filtate {
  width: 100%;
  height: 100%;
  .section {
    @include remCalc(padding, 0, 30);
    color: #333;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 40, 0, 28, 0);
    }
    .picker-val {
      @include remCalc(font-size, 28);
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      @include remCalc(padding, 0, 20);
      @include remCalc(height, 80);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      i {
        color: #ccc;
      }
    }
    .check-list {
      display: flex;
      flex-flow: wrap;
      li {
        text-align: center;
        @include remCalc(width, 210);
        @include remCalc(height, 80);
        @include remCalc(line-height, 80);
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 20);
        @include remCalc(margin-right, 30);
        &:nth-child(3n){
          margin-right: 0;
        }
        color: #333;
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        i {
          color: #fff;
          position: absolute;
          @include remCalc(font-size, 16);
          @include remCalc(right, 6);
          @include remCalc(bottom, 2);
          display: none;
        }
        &.checked {
          background: rgba(69, 157, 255, 0.1);
          color: #459dff;
          border: 1px solid transparent;
          i {
            display: block;
          }
          &::before {
            position: absolute;
            content: "";
            display: block;
            @include remCalc(width, 100);
            @include remCalc(height, 40);
            @include remCalc(right, -26);
            @include remCalc(bottom, -20);
            background: #459dff;
            transform: rotate(-218deg);
          }
        }
      }
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    @include thin-border(true,true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      text-align: center;
      & + div {
        background: #459dff;
        color: #fff;
        &::before{
          border-color: #459dff;
        }
        &::after{
          border-color: #459dff;
        }
      }
      background: #fff;
      color: #459dff;
    }
  }
}
.date-picker /deep/ .picker-slot:nth-of-type(1) {
  flex: 1.5!important;
}
</style>